<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>书室</title>
<style type="text/css" media="screen">
	

*{margin: 0;padding: 0;}
	body{font-family: 微软雅黑;
		font-size: 18px;
		color: white;}
	.top{width: 1349px;
		height: 120px;
		background-image: linear-gradient(to bottom,rgb(42,101,172),rgb(17,41,71));
		box-shadow: 1px 30px 100px rgb(10,24,40); 
	     position: relative; margin: 0 auto;}   
	.title{font-family: 微软雅黑; 
		text-shadow: 5px 5px 5px #999;
		color: white;
		font-size: 40px;
	    position: relative;
	    top:40px;
	    margin-left: 30px;
	   opacity: 0.9;}
	   .title a{text-decoration: none; color: white;}
	.nav ul{list-style: none; position:absolute;right: 0; top:80px;}
	.nav ul li{float: left; width: 120px;height: 35px;background-image:linear-gradient(to bottom,rgb(44,142,186),#112947) ; border-radius:3px; border-right:1px solid #112947;border-bottom:1px solid #112955;text-align: center; line-height: 2em;}
	.nav ul li a{text-decoration: none; color:white;}
	.nav ul li:hover{background: rgb(147,235,236);}
	.nav ul li a:hover{color:black;}
	.box{width: 1349px;
		height:1200px;
		background:rgb(44,106,182);
	     margin: 0 auto;}
    .left{width: 265px;float: left;}
	.book_title{margin: 70px 0 20px 20px;
	 font-family: 华文新魏; font-size: 30px;}
    .left ul li{margin: 10px 42px; font-size: 16px;}
    .left ul li a{text-decoration: none; 
    	color: white;}
    	.left ul li a:hover{color: black;}
    .box hr{width: 265px;opacity: 0.2;}
    .more{font-size:10px;font-family:微软雅黑;color: white; text-decoration: none;}
    .more:hover{color: black;}
    .bb{width: 200px; height: 70px;margin-left:20px;}
    .mid{width: 600px;height:1050px;float: left; 
     margin-left: 100px; margin-top: 75px;}
    .midtop{
   widows: 600px; height: 510px;
   background: rgb(75,225,211);
   border-radius: 10px;
   border-bottom: 1px solid #ccc;
    box-shadow: 0px 8px 20px #ccc;}
    .photo{margin:60px 0 0 30px; }
    .about{color:#112955; 
          	margin-left:30px;
         position: relative;top:20px; }
    .photo:hover{transform:scale(1.1,1.1);
         	transition: 0.3s; float: left;}
      .introduce{width:200px; height:200px;
      	       float: right; 
      	       position: relative;
      	       top:55px;left:-30px;
      	       }
  .introduce p{color:#112955;font-family:微软雅黑;}
 .midtop hr{width:598px;
 	position: relative;top:40px;
 	border:1px dotted black;
 	opacity: .3;
 	}
 	.read{
 		position: relative;top:100px; 
 		left:30px; color:black;}
 .midbottom{width:600px;
 height: 510px;
 margin-top: 30px;
   background: rgb(75,225,211);
border-radius: 10px;
   border-bottom: 1px solid #ccc;
    box-shadow: 0px 8px 20px #ccc;}
  .beauty{color: white;
  	font-size: 40px; 
  	font-family: 华文新魏;}
  .article{width:500px; 
  	height: 400px; 
  	margin:auto;
  	 position: relative;top:20px;}
.article a{text-decoration: none; color:blue;}
.article a:hover{color:red;}
.right{width: 308px;float: right;}
.inputbox{margin-left:10px; margin-top: 80px;}
 .text{width:200px;height: 28px;}
 .search{width: 60px;height: 32px; color:black;}
.news ul li a{text-decoration: none;
	color: white;font-size: 16px;}
	.newest{font-family: 华文新魏; font-size: 30px; }
.news ul li{margin-left: 25px;
	margin-top: 10px;margin-bottom: 10px;}
	.news ul li a:hover{color:black;}
.news{position: relative;top:60px;margin-left: 20px;}
.contact{margin-top: 30px; 
font-family: 华文新魏; font-size: 30px;}
.sub{width:70px;height: 30px;color:black;}
</style>
</head>
<body>
<div class="top">
	<h1 class="title"><a href="#">BOOK&nbsp;ROOM</a></h1>
	<div class="nav">
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">经管类</a></li>
			<li><a href="#">人文科社类</a></li>
			<li><a href="#">自然科学类</a></li>
			<li><a href="#">文学作品</a></li>
			<li><a href="#">考研</a></li>
		</ul>
	</div>
</div>
<div class="box">
	<div class="left">
		<p class="book_title">好书推荐 &nbsp;&nbsp;<a href="#" class="more"> 更多>></a></p>
		<ul>

			<li><a href="#">数据库原理及应用</a></li><hr>
			<li><a href="#">深入学习HTML+CSS</a></li><hr>
			<li><a href="#">活着就有快乐</a></li><hr>
			<li><a href="#">犯罪心理学</a></li><hr>
			<li><a href="#">第十一根手指</a></li><hr>
			<li><a href="#">简爱</a></li>
		</ul>
		<p class="book_title">
			最新书籍&nbsp;&nbsp;<a href="#" class="more"> 更多>></a>
		</p>
		<ul>

			<li><a href="#">微微一笑很倾城</a></li><hr>
			<li><a href="#">研究经济学的创新思维</a></li><hr>
			<li><a href="#">盗墓笔记</a></li><hr>
			<li><a href="#">夏有乔木雅望天堂</a></li><hr>
			<li><a href="#">新手学习JavaScript</a></li><hr>
			<li><a href="#">火星上的女人</a></li>
		</ul>
		<p class="book_title">
			友情链接
		</p>
		<a href="#"><img class="bb" src="b1.jpg"></a>
		<a href="#"><img class="bb" src="b2.jpg"></a>
		<a href="#"><img class="bb" src="b4.jpg"></a>
		<a href="#"><img class="bb" src="b5.jpeg"></a>
	</div>
	<div class="mid">
		<div class="midtop">
		   <h2 class="about">ABOUT BOOK ROOM</h2>
			<img class="photo" src="b3.jpg" width="300px" height="230px">
			<div class="introduce">
				<p>BOOK ROOM于2016年建立，书籍种类齐全，有自然科学类，经济管理类，人文社科类，文学作品，小说和考研资料，免费供人们阅读，让大家都能进入到书的世界，品味书香！书籍是人类进步的阶梯，多读好书，好读书，读书好！</p>

				</div>
				<hr>
				<h2 class="read">READ MORE,GET MORE!</h2>
		</div>
		<div class="midbottom">
		<div class="article">
			
		
			<h2 class="beauty">今日美文推荐</h2>
			&nbsp;
			<h3>九月，思念的季节</h3>
			&nbsp;
			<p>&nbsp;&nbsp;&nbsp;&nbsp;九月，无声降临，时光，匆匆离去。不经意间，二零一六悄悄过去了大半个年头，在我的心里或许远去的只是风景，或许离去的只是时光，而遗留在心海的却是一幕幕永生难忘的记忆。念，时时烙在寂寞的心弦；爱，默默埋在心的无边大海。心与爱，早已浑然一体；爱与心，已渐渐融化成水，并汇聚成波涛汹涌的大海，只为奔腾颠簸生活的激流，只为沐浴飘摇人生的风雨，只愿可以快乐的抒写出一切有关心与爱的绚丽的诗篇！让一颗沉睡已久的心，欣欣然的盛放出一朵朵靓丽幽香的小花，从此，明媚了蓝天，娇艳了云霞，也彻底地斑斓了一段段如歌的岁月！<br>... ...</p>

			<a href="#" title="">read more>></a>
		</div>
		</div>
	</div>
	<div class="right">
	<div class="inputbox">
		<input class="text" type="text">
		<input class="search" type="button" value="搜&nbsp;索">
	</div>
	<div class="news">
		<p class="newest">发表论文 &nbsp;&nbsp;<a href="#" class="more"> 更多>></a></p>
		<ul>

			<li><a href="#">大数据时代</a></li><hr>
			<li><a href="#">无线电子商务的兴起</a></li><hr>
			<li><a href="#">云计算</a></li><hr>
			<li><a href="#">BUY+技术</a></li><hr>
			<li><a href="#">互联网+</a></li><hr>
			<li><a href="#">公司的转型</a></li>
			<hr>
		</ul>

		<p class="contact">联系我们</p>

		<table>

			<tr>
				<a href="#"><td>QQ</td><td>:</td><td>123456789</td></a>
			</tr>

			<tr>
				<a href="#"><td>TEL</td><td>:</td><td>2221115</td></a></li>
			</tr>
			
		</table>
		<p class="contact">您的建议与意见</p>
		<textarea name="opinion" rows="25px" cols="30px"></textarea><br>
		<input class="sub" type="submit" value="提&nbsp;交">
	</div>
	</div>
</div>
</body>
</html>